<template>
  <div>
    <Row>
      <Card>
        <div>
          <Input v-model="searchObj.name" placeholder="请输入编号搜索..." class="searchItem"/>
          <Select style="width: 250px;" v-model="searchObj.sourceSrc" placeholder="请选择变更类型" class="searchItem">
            <Option :value="1">下级注册佣金</Option>
            <Option :value="2">下级贷款佣金</Option>
            <Option :value="3">提现</Option>
            <Option :value="4">提现失败</Option>
            <Option :value="5">后台操作</Option>
            <Option :value="6">放贷佣金</Option>
          </Select>
          <Button type="primary" style="" class="searchButton" icon="search" @click="search()">搜索</Button>
          <Button @click="cancel">取消</Button>
        </div>
        <div class="edittable-con-1 list" style="">
          <Table border ref="selection" :columns="columns" :data="list"></Table>
        </div>
        <div style="text-align: center;margin-top: 20px">
          <Page :current="pageId" :total="totalPage" :page-size="10" @on-change='search'></Page>
        </div>
      </Card>
    </Row>
  </div>
</template>

<script>
  import { getLogReward } from '@/api/user'

  export default {
    name: 'user-reward',
    data () {
      return {
        searchObj: {
          cid: parseInt(this.$route.query.id),
          id: '',
          sourceSrc: '',
          pageId: 1
        },
        columns: [
          {
            title: '编号',
            align: 'center',
            key: 'id',
            width: 100
          },
          {
            title: '变更类型',
            align: 'center',
            render: (h, params) => {
              switch (parseInt(params.row.sourceSrc)) {
                case 6:
                  return h('Tag', {
                    props: {
                      color: '#2d8cf0'
                    }
                  }, '放贷佣金');
                  break;
                case 5:
                  return h('Tag', {
                    props: {
                      color: '#19be6b'
                    }
                  }, '后台操作');
                  break;
                case 4:
                  return h('Tag', {
                    props: {
                      color: '#ed4014'
                    }
                  }, '提现失败');
                  break;
                case 3:
                  return h('Tag', {
                    props: {
                      color: '#5cadff'
                    }
                  }, '提现');
                  break;
                case 2:
                  return h('Tag', {
                    props: {
                      color: '#2b85e4'
                    }
                  }, '下级贷款佣金');
                  break;
                case 1:
                  return h('Tag', {
                    props: {
                      color: '#2db7f5'
                    }
                  }, '下级注册佣金');
                  break;
              }
            }
          },
          {
            title: '金额',
            align: 'center',
            key: 'reward'
          },
          {
            title: '余额',
            align: 'center',
            key: 'balance'
          },
          {
            title: '变更时间',
            align: 'center',
            key: 'updateTime'
          },
          // {
          //   title: '操作',
          //   align: 'center',
          //   key: 'handle',
          //   render: (h, params) => {
          //     return h('div', [
          //       h('Poptip', {
          //         props: {
          //           confirm: true,
          //           title: '您确定要删除这条数据吗?',
          //           transfer: true
          //         },
          //         on: {
          //           'on-ok': () => {
          //             this.del(params.row.id)
          //           }
          //         }
          //       }, [
          //         h('Button', {
          //           props: {
          //             type: 'error',
          //             size: 'small'
          //           }
          //         }, '删除')
          //       ])
          //     ])
          //   }
          // }
        ],
        list: [],
        pageId: 1,
        totalPage: 10
      }
    },
    methods: {
      getList () {
        getLogReward(this.searchObj).then(data => {
          this.list = data.data
          this.pageId = data.current_page
          this.totalPage = data.total
        })
      },
      search () {
        if (arguments[0]) {
          this.searchObj.pageId = arguments[0]
        }
        this.getList()
      },
      cancel () {
        this.searchObj = {
          cid: parseInt(this.$route.query.id),
          name: '',
          pageId: 1
        }
        this.getList()
      }
    },
    mounted () {
      this.getList()
    }
  }
</script>

<style scoped>

</style>
